<template>
  <div class="container mx-auto">
    <topheader />
    <main class="flex mt-8">
      <!-- Sidebar -->
      <aside class="w-1/4 pr-8">
        <h2 class="text-xl font-bold mb-4 mx-4">找消防厂家</h2>
        <input type="text" placeholder="搜索" class="w-full p-2 border rounded mb-4">
        <!-- <ul>
          <li v-for="category in categories" :key="category" class="mb-2">
            <a href="#" class="text-blue-600 hover:underline">{{ category }}</a>
          </li>
        </ul> -->
        <ul class="menu bg-base-100 w-56 rounded-box mx-4">
  <li v-for="category in categories" :key="category"><a>{{ category }}</a></li>
  <li class="bordered"><a>I have border</a></li>
  <li><a>Item 3</a></li>
</ul>
      </aside>

      <!-- Main content -->
      <div class="w-3/4">
        <h2 class="text-xl font-bold mb-4">各大厂家</h2>
        <div class="grid grid-cols-3 gap-4">
          <!-- <div v-for="product in products" :key="product.id" class="border p-4">
              <div class="bg-gray-200 h-40 mb-2"></div>
              <h3 class="font-bold">{{ product.name }}</h3>
              <p>{{ product.description }}</p>
            </div> -->
          <div class="card w-82 bg-base-100 shadow-xl mb-5" v-for="product in products" :key="product.id">
            <figure><img :src="product.image" alt="Shoes" /></figure>
            <div class="card-body">
              <h2 class="card-title">
                {{ product.name }}
                <div class="badge badge-secondary">NEW</div>
              </h2>
              <p>{{ product.description }}</p>
              <div class="card-actions justify-end">
                <div class="badge badge-outline">Fashion</div>
                <div class="badge badge-outline">Products</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

  <foot />
  </div>
</template>

<script>
import topheader from '@/components/topheader.vue';
import foot from '@/components/foot.vue';
export default {
  data() {
    return {
      categories: ['类别1', '类别2', '类别3', '类别4', '类别5'],
      products: [
        { id: 1, name: '产品1', description: '描述1' ,image:'../public/images/Snipaste_2024-10-25_16-11-22.png'},
        { id: 2, name: '产品2', description: '描述2' ,image:'../public/images/Snipaste_2024-10-25_16-11-10.png' },
        { id: 3, name: '产品3', description: '描述3' ,image:'../public/images/Snipaste_2024-10-25_16-11-22.png' },
        { id: 4, name: '产品4', description: '描述4' ,image:'../public/images/Snipaste_2024-10-25_16-11-57.png' },
        { id: 5, name: '产品5', description: '描述5' ,image:'../public/images/Snipaste_2024-10-25_16-11-10.png' },
      ]
    }
  }
}
</script>